<template>
	<view id="reg-page">
    <view class="tips">
      必须为本人银行卡预留手机号码
    </view>
		<view class="login-body">
			<view class="login-page-title" @click="showOpenId">{{GLOBAL.SYSTEM_TITLE}}</view>
			<view class="show-openid" v-if="isShowOpenId">{{openId}} <text v-if="openId" class="copy-btn" @click="copyOpenId">复制</text></view>
			<view class="phone-login-box">
				<view class="login-box">
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-user"></view>
						<input class="login-input" type="text" v-model="phone"  placeholder="输入银行卡预留手机号码">
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-invitation-code"></view>
						<input class="login-input" type="text"  v-model="inviteCode" placeholder="请输入邀请码">
					</view>
					<!-- <view class="login-input-wrapper">
						<view class="icon el-icon-ali-number-code"></view>
						<view class="graph-code">
							<validate class="validate"  @success="setValidate"></validate>
						</view>
					</view> -->
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-sms-code"></view>
						<input class="login-input" type="text" v-model="phoneCode" placeholder="请输入短信验证码">
						<view @tap="getMsgVaildCode" class="login-get-vaild-code">{{vaildCodeText}}
						    <text v-if="vaildCodeText!=='获取验证码'">s</text>
						</view>
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-password"></view>
						<input class="login-input" type="password" v-model="password"  placeholder="请设置你的登录密码">
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-password"></view>
						<input class="login-input" type="password" v-model="confirmPassword"  placeholder="请确认你的登录密码">
					</view>
				</view>
				<button class="confirm-btn" @click="toReg" :loading="loading" :disabled="loading">注册</button>
				<view class="other-opt-obx">
					<view class="other-opt-title" @click="toLoginPage">
						已有账号？<text class="login-text">登录</text>
					</view>

				</view>
			</view>
		</view>
		<u-modal
			:showModal="openRegModal"
			title="提示"
			content="暂不开放注册,请等待通知。"
			:autoClose = "false"
			:showCancel = "false"
			:showConfirm= "false"
			>
		</u-modal>
	</view>
</template>

<script>
	import {
	    mapMutations
	} from 'vuex';
	import {
		apiRegister,
		apiSendSms,
		apiWechatLogin,
		apiModelInfo
	} from '../../../http/apis.js'
	import uModal from '../../components/uni-modal/uni-modal.vue'
	import Validate from '../../components/graphVerification.vue'
	export default{
		components:{
			uModal,
			Validate
		},
		data(){
			return {
				phone: '',//18812341234
				password: '',//qwe123
				loading: false,
				imgCode: '',
				uuid: '',
				captcha: '',
				phoneCode: '',
				inviteCode: '',
				vaildCodeText: '获取验证码',
				confirmPassword: '',
				isShowOpenId: false,
				lastTime: '',
				clickNum: 0,
				openId: '',
				openRegModal: false,
				modalData: {},
				// validateCode: ''
			}
		},
		onLoad(option){
			if(option.inviteCode == 'null' || option.inviteCode == '' || option.inviteCode == null || option.inviteCode == 'undefined'){
				this.inviteCode = ''
			} else {
				this.inviteCode = option.inviteCode
			}
			if (option.openId == 'null' || option.openId == '' || option.openId == null || option.openId == 'undefined') {
				this.openId = ''
			} else {
				this.openId = option.openId
			}
			// if (this.inviteCode) {
			// 	 uni.removeStorageSync('token')
			// }
			if (uni.getStorageSync('token') == '') {
				if (!this.openId) {
					if (this.isWechat()) {
						//如果为微信端就授权
						this.loginByWechat()
					}
				}
			} else {
				uni.switchTab({
				    url: '../home/home'
				});
			}
		},
		onShow() {
			apiModelInfo({}).then(res =>{
			    if(res.data.code == 1)  {
					this.modalData = res.data.msg
					this.openRegModal = res.data.msg.push_register == '2' ? true : false
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
			this.getMobilePlatformType()
		},
		methods: {
			...mapMutations(['login']),
			copyOpenId(){
				uni.setClipboardData({
					data: this.openId,
					success: function(data) {
						this.$msg.showToast('复制成功')
					}
				});
			},
			showOpenId(){
				var nowTime = new Date();
				if (this.clickNum == 5) {
				    this.isShowOpenId = true
					this.lastTime = ''
					this.clickNum = 0
					return
				}
				if (this.clickNum > 0) {
					if (Math.round(nowTime.getTime() - this.lastTime.getTime()) > 500) {
						this.clickNum = 0
					} else{
						this.clickNum++
						this.lastTime = nowTime
					}
				} else {
					this.clickNum++
					this.lastTime = nowTime
				}

			},
			// setValidate(resp){
			// 	this.validateCode = resp
			// },
			// resetValidate() {
			//     this.validateCode = "";
			//     LUOCAPTCHA && LUOCAPTCHA.reset();
			// },
			getMsgVaildCode(){
				if (!this.isPhoneNumRight()) {
				    return
				}
				// if (!this.validateCode) {
				// 	this.$msg.showToast('请先点击上方的验证')
				// 	return
				// }
				if (this.vaildCodeText !== '获取验证码') {
				    return
				}
				apiSendSms({
				    phone: this.phone,
				    codeType: 'pushRegister',
				    // captcha: this.validateCode
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.vaildCodeText = 60
						let timer = setInterval(() => {
						    this.vaildCodeText = (this.vaildCodeText - 1)
						    if (this.vaildCodeText == 0) {
						        this.vaildCodeText = '获取验证码'
						        clearInterval(timer)
						    }
						}, 1000)
					} else {
						this.$msg.showToast(res.data.msg)
						this.resetValidate()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			loginByWechat(){
				if(this.isWechat()){
					apiWechatLogin({}).then(res =>{
              if(res.data.code == 1)  {
              let appid = res.data.msg
              // 没有前置机时
              // let link = this.GLOBAL.MAIN_URL + 'pages/wxAuth/wxAuth?inviteCode=' + this.inviteCode
              // 有前置机时
              let link = this.GLOBAL.WX_CALLBACK + 'baseapi/pushBase/weChatUserInfo?inviteCode=' + this.inviteCode
              let uri = encodeURIComponent(link);
              let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
              window.location.href = authURL
          }
					}).catch(res => {
						this.$msg.showToast(res.data.msg)
					})
				} else {
					this.$msg.showToast('请到微信上打开平台')
				}
			},
			isWechat () {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			toLoginPage(){
				uni.navigateTo({
				    url: '../login/login',
				})
			},

			async toReg(){
				if(!this.isPhoneNumRight()){
					return
				}
				if(!this.isInviteCodeRight()){
					return
				}
				if(!this.isMsgCodeRight()){
					return
				}
				if (!this.isPasswordRight()) {
				    return
				}
				if(this.password != this.confirmPassword){
					this.$msg.showToast('密码不一致')
					return
				}
				this.$msg.showLoading('注册中')
				this.loading = true;

				apiRegister({
				    phone:this.phone,
				    phoneCode:this.phoneCode,
				    inviteCode:this.inviteCode,
				    openId: this.openId,
				    password: this.password
				}).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.login(res.data.token);
						this.$msg.showToast('注册成功')
						uni.setStorageSync('token',res.data.token)
						uni.setStorageSync('phone', this.phone);
						uni.setStorageSync('password', this.password);
						setTimeout(()=>{
							this.loading = false;
							uni.navigateTo({
							    url: '../bindInfo/bindTbAccountxl?type=init'
							});
						},500)
					}  else {
						this.loading = false;
						this.$msg.showToast(res.data.msg)
						this.resetValidate()
					}
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
					this.loading = false;
				})
			},
			isPasswordRight(){
				let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
				if(!this.password){
					uni.showToast({
					  title: '密码不能为空',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				if(!reg.test(this.password)){
					uni.showToast({
					  title: '密码必须包含字母和数字，且在6~20位之间',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				return true
			},
			//校验短信验证码
			isMsgCodeRight(){
				if(!this.phoneCode){
					uni.showToast({
					  title: '请输入短信验证码',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				if(this.phoneCode.length<4){
					uni.showToast({
					  title: '验证码最短为 4 个字符',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				return true
			},
			//验证邀请码
			isInviteCodeRight(){
				if(!this.inviteCode){
					uni.showToast({
					  title: '请输入邀请码',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				if(this.inviteCode.length<4){
					uni.showToast({
					  title: '邀请码最短为 4 个字符',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				return true
			},
			//校验手机号码
			isPhoneNumRight() {
			    let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
			    if (!this.phone) {
					this.$msg.showToast('手机号不能为空')
			        return false
			    }
			    if (!reg.test(this.phone)) {
					this.$msg.showToast('请输入正确的手机号')
			        this.phone = ''
			        return false
			    }
			    return true
			},
			getMobilePlatformType(){
				try{
					let webview = plus.webview.currentWebview()
					uni.setStorageSync('mobilePlatformType', webview.mobilePlatformType);
				}catch(e){
					uni.setStorageSync('mobilePlatformType', 'H5');
				}

			},
		},

	}
</script>

<style lang="scss">
	#reg-page {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-y: auto;

    .tips {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40upx;
      padding: 20upx;
      font-size: 32upx;
      color: white;
      text-align: center;
      background-color: red;
    }

    .copy-btn {
			display: inline-block;
			background: $theme-color;
			padding: 3px 8px;
			border-radius: 5px;
		    margin-left: 5px;
			color: #fff;
			font-size: 14px;
		}
		.login-page-title {
			// padding-top: 248upx;
			text-align: center;
			font-size: 70upx;
			font-family: MFLiHei_Noncommercial-Regular,MFLiHei_Noncommercial;
			font-weight: 400;
			color: rgba(255,80,1,1);
			line-height: 86upx;
		}
		.login-box {
			margin-top: 50upx;
			padding: 0 80upx;
			.login-input-wrapper {
				border-bottom: 1px solid #E8E8E8;
				margin-top: 40upx;
				position: relative;
				display: flex;
				align-items: center;
				padding-bottom: 16upx;
				.icon {
					font-size: 38upx;
					display: inline-block;
					vertical-align: super;
					color: #CFCFCF;
				}
				.login-input {
					display: inline-block;
					margin-left: 20upx;
					font-size: 30upx;
					width: 85%;
					padding: 8upx 0;
					.uni-input-placeholder {
						color:rgba(153,153,153,1);
					}
				}
				.graph-code {
					flex: 1;
					margin-left: 20upx;
				}
				.login-input-image-code {
					width: 180upx;
					height: 80upx;
					position: absolute;
					right: 0;
					top: -20upx;
				}
				.login-get-vaild-code {
					width: 180upx;
					height: 60upx;
					position: absolute;
					right: 0;
					top: -10upx;
					border-radius:6upx;
					background: $theme-background-color;
					font-size: 24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height: 60upx;
					text-align: center;
				}

			}
		}
		.confirm-btn{
			height: 96upx;
			line-height: 96upx;
			border-radius: 10upx;
			background: $theme-background-color;
			font-size: $font-lg;
			margin: 40upx 80upx 0 80upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
		.other-opt-obx {
			text-align: center;
			.other-opt-title {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				line-height: 24upx;
				margin-top: 56upx;
				color:rgba(153,153,153,1);
				.login-text {
					color: $theme-color;
				}
			}
		}
	}
</style>

